<template>
  <div>
    <el-row>
  <el-button type="primary" icon="el-icon-edit">新增会员</el-button>
  <el-button type="success" icon="el-icon-search">会员管理</el-button>
  <el-button type="primary" icon="el-icon-edit">会员设置</el-button>
  <el-button @click="dialog = true" type="primary" style="margin-left: 35px;">
  会员详情
</el-button>
<el-drawer
  title="查看会员详情与服务"
  :before-close="handleClose"
  :visible.sync="dialog"
  direction="rtl"
  custom-class="demo-drawer"
  ref="drawer" >

   <div class="demo-drawer__content">
    <el-form :model="form" >

      <el-form-item label="会员头像" :label-width="formLabelWidth">
        <el-upload
          class="upload-demo"
          drag
          multiple
          action="https://jsonplaceholder.typicode.com/posts/"
          :on-change="handleChange"
          :file-list="fileList">
          <i class="el-icon-upload"></i>
        <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
        </el-upload>
      </el-form-item>
      


      <el-form-item label="会员卡号" :label-width="formLabelWidth">
        <el-input v-model="form.name" autocomplete="off"></el-input>
      </el-form-item>
      

   
      <el-form-item label="微信会员卡号" :label-width="formLabelWidth">
        <el-input v-model="form.name" autocomplete="off"></el-input>
      </el-form-item>
     

     <el-form-item label="办卡日期">
     <el-col :span="11">
      <el-date-picker type="date" placeholder="选择日期" v-model="form.date1" style="width: 100%;"></el-date-picker>
    </el-col>
  </el-form-item>
  
  <el-form-item label="会员折扣" :label-width="formLabelWidth">
        <el-select v-model="form.region" placeholder="请选择会员折扣">
          <el-option label="九折" value="0.90"></el-option>
          <el-option label="八五折" value="0.85"></el-option>
          <el-option label="八折" value="0.80"></el-option>
          <el-option label="七五折" value="0.75"></el-option>
          <el-option label="七折" value="0.70"></el-option>
        </el-select>
      </el-form-item>
  
      <el-form-item label="卡内余额" :label-width="formLabelWidth">
        <el-input v-model="form.name" autocomplete="off"></el-input>
      </el-form-item>

      <el-form-item label="卡内积分" :label-width="formLabelWidth">
        <el-input v-model="form.name" autocomplete="off"></el-input>
      </el-form-item>

     <el-form-item label="卡状态" :label-width="formLabelWidth">
        <el-switch
          style="display: block"
          v-model="valueSwitch"
          active-color="#13ce66"
          inactive-color="#ff4949"
          active-text="开启"
          inactive-text="注销">
        </el-switch>
      </el-form-item>

      <el-form-item label="累计消费" :label-width="formLabelWidth">
        <el-input v-model="form.name" autocomplete="off"></el-input>
      </el-form-item>


    </el-form>

    <div class="demo-drawer__footer">
      <el-button @click="cancelForm">取 消</el-button>
      <el-button type="primary" @click="$refs.drawer.closeDrawer()" :loading="loading">{{ loading ? '提交中 ...' : '确 定' }}</el-button>
    </div>
  </div>
</el-drawer>

    </el-row>
    <el-divider></el-divider>
     <KeyIndex :inputValue="input1" class="userinfo" ></KeyIndex>
     <KeyIndex :inputValue="input2" class="userinfo" ></KeyIndex>
  </div>
</template>
<script>
import KeyIndex from '@/views/keyindex'
export default {
  components: {
    KeyIndex
  },
  data () {
    return {
      // 用户信息框
      input1: '',
      input2: '',
      dialog: false,
      loading: false,
      valueSwitch:true,

      form: {
        name: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: ''
      },
      formLabelWidth: '70px',
      timer: null,
      fileList: [{
          name: 'food.jpeg',
          url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
        }]
    }
  },

  methods: {
    handleClose(done) {
      if (this.loading) {
        return;
      }
      this.$confirm('确定要提交表单吗？')
        .then(_ => {
          this.loading = true;
          this.timer = setTimeout(() => {
            done();
            // 动画关闭需要一定的时间
            setTimeout(() => {
              this.loading = false;
            }, 400);
          }, 2000);
        })
        .catch(_ => {});
    },
    cancelForm() {
      this.loading = false;
      this.dialog = false;
      clearTimeout(this.timer);
    },
    handleChange(file, fileList) {
        this.fileList = fileList.slice(-3);
      }
  }
}
</script>